<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <div class="top">
        <div class="banner">
            <img class="logo" src="images/banner-logo.jpg" alt="">
            <a class="logo-title" href="#">新世界</a>

            <ul class="nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">最新活动</a></li>
                <li><a href="#">爱心社区</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">登陆</a></li>
            </ul>
        </div>

        <div class="top-content">
            <img src="images/top-content-img.jpg" alt="" style="width: 100%; height: 100%;">
            <div class="start">
                <p>Time of new life</p>
                <p>新时代，年轻的人们让我们一起<br>体验新生活，享受新生活</p>
                <a href="#" class="get-Start">开始体验</a>
            </div>
        </div>

        <ul class="feature-list">
            <li class="list1"><p>打造全新世界观，让你更爱你的生活</p></li>
            <li class="list2"><p>丰富多彩的公益活动，发挥世界主人公意思</p></li>
            <li class="list3"><p>时尚的新理念，an超前体验未知的生活</p></li>
            <li class="list4"><p>完善的培养机制，培养你全新的世界观</p></li>
        </ul>
    </div>

    <section class="section-what-new">
        <span>关于新世界，你不知道的还有什么？</span>
    </section>

    <section class="section-find">
        <p class="p1">查找新世界城市活动信息</p>
        <p class="p2"></p>
        <p class="p3">每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
        
        <div class="find-selects">

            <input type="text" class="country" list="country_list" placeholder="中国">
            <datalist id="country_list">
                <option value="中国">中国</option>
            </datalist>

            <input type="text" class="province" list="province_list" placeholder="省份">
            <datalist id="province_list">
                <option value="北京市">北京市</option>
                <option value="天津市">天津市</option>
                <option value="河北省">河北省</option>
                <option value="陕西省">陕西省</option>
                <option value="内蒙古自治区">内蒙古自治区</option>
                <option value="辽宁省">辽宁省</option>
            </datalist>

            <input type="text" class="city" list="city_list" placeholder="城市">
            <datalist id="city_list">
                <option value="成都">成都</option>
            </datalist>

            <input type="submit" value="搜索" class="search">
        </div>
    </section>

    <section class="section-activity">
            <div class="beijing item-activ">
                <img src="images/beijing-activy.jpg" alt="">
                <p class="p1">北京活动</p>
                <p class="p2">新社区大联盟</p>
            </div>
            <div class="shanghai item-activ">
                <p class="p1">上海活动</p>
                <p class="p2">夜上海新景观探索</p>
                <img src="images/shanghai-activy.jpg" alt="">
            </div>
            <div class="shenzhen item-activ">
                <img src="images/shenzhen-activy.jpg" alt="">
                <p class="p1">深圳活动</p>
                <p class="p2">全新海岸线观景点</p>
            </div>
            <div class="xianggang item-activ">
                <p class="p1">香港活动</p>
                <p class="p2">奢侈消费大派送</p>
                <img src="images/xianggang-activy.jpg" alt="">
            </div>
    </section>

    <section class="section-new-world">
        <div class="new-world-left">
            <div class="content">
                <span class="span1">新世界<br></span>
                <span class="span2">TIME<br></span>
                <span class="span3">@新世界-北京<br>2016.04.01</span>
            </div>

            <div class="triangle"></div>
        </div>

        <div class="new-world-right">
            <div class="content">
                <span class="span1">新世界 / <b>01</b><br></span>
                <span class="span2">新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界<br></span>
                <a class="more" href="">更多详情</a>
                <br>
                <input type="radio" name="which-item"  checked="checked">
                <input type="radio" name="which-item" >
                <input type="radio" name="which-item">
            </div>
        </div>
    </section>

    <section class="section-about">

        <div class="about-left">
            <div class="content">
                <span>新时代<br>关于爱生活的我们<br></span>
                <span><br></span>
                <a href="" class="findMore">查看更多</a>
            </div>
        </div>


        <div class="about-center">
            <div class="content">
                <span>新时代<br>关于爱生活的我们<br></span>
                <span><br></span>
                <a href="" class="findMore">查看更多</a>
            </div>
        </div>
        <div class="about-right">
            <div class="triangle"></div>
        </div>
    </section>

    <section class="section-volunteer">
        <div class="become-volunteer">
            <span>成为我们的志愿者<br></span>
            <span><br></span>
            <span>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情，那就不要犹豫，快来加入我们，成为改变所有人生活的人</span>
        </div>

        <div class="volunteer-agree">
            <p class="xieyi">
                <p class="title">新世界志愿者协议</p>
                <p>加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则......</p>
                <p class="more"><a href="">more</a></p>
            </p>

            <p class="quanli">
                <p class="title">新世界志愿者权利</p>
                <p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在新世界的优先参与资格</p>
                <p class="more"><a href="">more</a></p>
            </p>

            <p class="gengduo">
                <p class="title">更多条款</p>
                <p class="more"><a href="">more</a></p>
            </p>
        </div>

        <div class="volunteer-register">
            <form action="">
            <input type="text" placeholder="姓名：" class="top_input">
            <input type="text" placeholder="年龄：" class="top_input">
            <input type="text" placeholder="联系方式：" class="top_input">
            <input type="text" placeholder="联系地址：" class="top_input">
            <input type="text" placeholder="请简单描述您梦想的生活：" class="life_input">
            <input type="text" class="submit" value="提交申请">
            </form>
        </div>
    </section>

    <div class="bottom">
        <div class="content">
            <p>联系我们</p>
            <p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯也可以通过以下任何方式关注我们的动态</p>
            <input type="text" placeholder="someone@email.com" class="email">
            <input type="submit" value="提交" class="submit">

            <a href="" class="weibo"></a>
            <a href="" class="qq"></a>
            <a href="" class="twitter"></a>
            <a href="" class="global"></a>
        </div>
    </div>

    <div class="footer">
        <span>@2016新世界</span>
        <span><a href="#">Back to top</a></span>
    </div>
</div>

</body>
</html>